<template>
  <div id="topBar">
    <div class="topBoxLeft">
      <logo-box></logo-box>
    </div>
    <div class="topBoxRight">
      <div class="topBoxRightBoxLeft">
        <span class="dateText">
          今天是{{ date.year }}年{{ date.mounth }}月{{
          date.day
          }}日！熊先森，欢迎您！
        </span>
        <span class="showText">
          <scroll-box style="display:inline-block"></scroll-box>
        </span>
      </div>
      <div class="topBoxRightBoxRight">
        <span class="headPhoto">
          <img src="../../assets/images/1.jpg" alt />
        </span>
        <span class="userName" @click="toEditUserinfos">{{currentUserInfos.name}}</span>
        <span class="exitIcon" @click="toExit">
          <svg-icon icon-class="exit"></svg-icon>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import logoBox from "./components/logo/index.vue";
import scrollBox from "./components/scroll/index.vue";
export default {
  name: "topBar",
  components: {
    logoBox,
    scrollBox
  },
  data() {
    return {
      date: {
        year: "",
        mounth: "",
        day: ""
      },
      currentUserInfos: {
        name: "熊先森",
        userKey: "12131"
      }
    };
  },
  created() {
    this.getTodayTime();
  },
  methods: {
    // 退出登陆
    toExit() {
      this.$confirm("确定退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$router.push("/");
          location.reload();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出"
          });
        });
      // this.$store.commit("isLoading", false);
      // console.log(this.$store.state.isLoading);
    },
    // 编辑用户信息
    toEditUserinfos() {
      this.$router.push({
        path: "userinfos",
        query: { data: this.currentUserInfos }
      });
    },
    // 获取今日日期时间
    getTodayTime() {
      var day = new Date();
      day.setTime(day.getTime());
      this.date.year = day.getFullYear();
      this.date.mounth = day.getMonth() + 1;
      this.date.day = day.getDate();
    }
  }
};
</script>
<style lang="scss" scoped>
#topBar {
  width: 100%;
  height: 50px;
  .topBoxLeft {
    position: fixed;
  }
  // background-color: rgb(150, 187, 235);
  .topBoxRight {
    width: 100%;
    height: 50px;
    position: fixed;
    left: 200px;
    top: 0;
    background-color: #fff;
    box-shadow: 0 1px 4px 0 hsla(209, 100%, 8%, 0.13);
    .topBoxRightBoxLeft {
      height: 50px;
      .dateText {
        vertical-align: top;
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        padding-left: 20px;
        color: #d3b7b7;
        -moz-user-select: none; /*火狐*/
        -webkit-user-select: none; /*webkit浏览器*/
        -ms-user-select: none; /*IE10*/
        -khtml-user-select: none; /*早期浏览器*/
        user-select: none;
      }
      .showText {
        display: inline-block;
        width: 400px;
        margin-left: 50px;
        // border: 1px solid #000;
        font-size: 14px;
        color: red;
        height: 50px;
        line-height: 62px;
      }
    }
    .topBoxRightBoxRight {
      width: 400px;
      height: 50px;
      // background-color: pink;
      position: absolute;
      top: 0;
      right: 20px;
      display: flex;
      align-items: center;
      .headPhoto {
        position: absolute;
        // top: 0;
        right: 400px;
        display: inline-block;
        width: 40px;
        height: 40px;
        // line-height: 45px;
        border-radius: 40px;
        background-color: red;
        // text-align: center;
        overflow: hidden;
        img {
          width: 40px;
          height: 40px;
          // line-height: 30px;
        }
      }
      .userName {
        position: absolute;
        top: 0;
        right: 288px;
        width: 100px;
        height: 50px;
        line-height: 50px;
        // background-color: red;
        font-size: 13px;
        overflow: hidden;
        cursor: pointer;
      }
      .exitIcon {
        position: absolute;
        right: 200px;
        cursor: pointer;
      }
    }
  }
}
</style>
